import React from 'react'
import { Tabbars } from '../../router/router'
import { Tabbar } from 'react-vant';
import { Outlet } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import styles from './my.module.css'
function Index() {
   let nav=useNavigate()
  return (
    <div className={styles.dhz}>
      <main>
           <Outlet />
      </main>
      <footer>
           <Tabbar onChange={(key)=>nav(key)}>
        {
          Tabbars && Tabbars.map((item, index) => {
            return <Tabbar.Item key={item.path} icon={item.icon} name={item.path}>{item.title }</Tabbar.Item>
           })
        }
      </Tabbar>
   </footer>
   
    </div>
  )
}

export default Index
